<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <title>wgxadmin - index</title>

  <meta name="description" content="index" />

  <link rel="stylesheet" href="wgx_admin_static/fontawesome/5.3.1/css/all.min.css" />
  <link rel="stylesheet" href="wgx_admin_static/admin/wgxadmin.css" />
</head>

<body>
  <div id="topbar" class="topbar">
    <button class="sidebar-toggle">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="topbar-title">
      <a href="index.html">
        <span class="title-content">
          <i class="fa fa-leaf"></i> <span>Wgx Admin</span>
        </span>
      </a>
    </div>
    <ul class="topbar-buttons wgxadmin-clearfix">
      <li class="button tasks">
        <a class="topbar-button-grey" href="#" onclick="return false;">
          <span class="button-content">
            <i class="icon fa fa-tasks"></i>
            <span class="wgxadmin-badge">4</span>
          </span>
        </a>
        <ul class="topbar-dropdown-menu" style="display: none;">
          <li class="dropdown-header">
            <i class="icon fa fa-check"></i> 4 Tasks to complete
          </li>
          <li class="dropdown-content">
            <!-- <div class="scroll-track" style="display: none;"></div> -->
            <div class="scroll-content">
              <ul class="dropdown-content-list">
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">Software Update</span>
                      <span style="display: block; float: right;">65%</span>
                    </div>
                    <div class="wgxadmin-progress">
                      <div style="background-color: #2A91D8; width: 65%;" class="wgxadmin-progress-bar"></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">Hardware Upgrade</span>
                      <span style="display: block; float: right;">35%</span>
                    </div>
                    <div class="wgxadmin-progress">
                      <div style="background-color: #CA5952; width: 35%;" class="wgxadmin-progress-bar"></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">Unit Testing</span>
                      <span style="display: block; float: right;">15%</span>
                    </div>
                    <div class="wgxadmin-progress">
                      <div style="background-color: #F2BB46; width: 15%;" class="wgxadmin-progress-bar"></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">Bug Fixes</span>
                      <span style="display: block; float: right;">90%</span>
                    </div>
                    <div class="wgxadmin-progress wgxadmin-progress-striped active">
                      <div style="background-color: #59A84B; width: 90%;" class="wgxadmin-progress-bar"></div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="dropdown-footer">
            <a href="#" onclick="return false;">
              See tasks with details
              <i class="icon fa fa-arrow-right"></i>
            </a>
          </li>
        </ul>
      </li>
      <li class="button notifications">
        <a class="topbar-button-purple" href="#" onclick="return false;">
          <span class="button-content">
            <i class="icon fa fa-bell animated-bell"></i>
            <span class="wgxadmin-badge">8</span>
          </span>
        </a>
        <ul class="topbar-dropdown-menu" style="display: none;">
          <li class="dropdown-header">
            <i class="icon fa fa-exclamation-triangle"></i> 8 Notifications
          </li>
          <li class="dropdown-content">
            <!-- <div class="scroll-track" style="display: none;"></div> -->
            <div class="scroll-content">
              <ul class="dropdown-content-list">
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">
                        <i class="icon fa fa-comment" style="background-color: #D6487E; border-color: #D6487E;"></i> New Comments
                      </span>
                      <span class="wgxadmin-badge" style="display: block; float: right; background-color: #3A87AD;">+12</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">
                        <i class="icon fa fa-user" style="background-color: #428BCA; border-color: #428BCA;"></i> Bob just signed up as an editor ...
                      </span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">
                        <i class="icon fa fa-shopping-cart" style="background-color: #87B87F; border-color: #87B87F;"></i> New Orders
                      </span>
                      <span class="wgxadmin-badge" style="display: block; float: right; background-color: #87B87F;">+8</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="wgxadmin-clearfix">
                      <span style="display: block; float: left;">
                        <i class="icon fab fa-twitter" style="background-color: #6FB3E0; border-color: #6FB3E0;"></i> Followers
                      </span>
                      <span class="wgxadmin-badge" style="display: block; float: right; background-color: #3A87AD;">+11</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="dropdown-footer">
            <a href="#" onclick="return false;">
              See all notifications
              <i class="icon fa fa-arrow-right"></i>
            </a>
          </li>
        </ul>
      </li>
      <li class="button messages">
        <a class="topbar-button-green" href="#" onclick="return false;">
          <span class="button-content">
            <i class="icon fa fa-envelope animated-vertical"></i>
            <span class="wgxadmin-badge">5</span>
          </span>
        </a>
        <ul class="topbar-dropdown-menu" style="display: none;">
          <li class="dropdown-header">
            <i class="icon far fa-envelope"></i> 5 Messages
          </li>
          <li class="dropdown-content">
            <!-- <div class="scroll-track" style="display: none;"></div> -->
            <div class="scroll-content">
              <ul class="dropdown-content-list">
                <li>
                  <a href="#" onclick="return false;">
                    <div class="msg-avatar">
                      <img src="wgx_admin_static/admin/images/avatar.png" alt="avatar" />
                    </div>
                    <div class="msg-body">
                      <div class="msg-content">
                        <span class="msg-name">Alex:</span>
                        <span class="msg">Ciao sociis natoque penatibus et auctor ... </span>
                      </div>
                      <div class="msg-time">
                        <i class="far fa-clock"></i>
                        <span class="time">a moment ago</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="msg-avatar">
                      <img src="wgx_admin_static/admin/images/avatar3.png" alt="avatar" />
                    </div>
                    <div class="msg-body">
                      <div class="msg-content">
                        <span class="msg-name">Susan:</span>
                        <span class="msg">Vestibulum id ligula porta felis euismod ...</span>
                      </div>
                      <div class="msg-time">
                        <i class="far fa-clock"></i>
                        <span class="time">20 minutes ago</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="msg-avatar">
                      <img src="wgx_admin_static/admin/images/avatar4.png" alt="avatar" />
                    </div>
                    <div class="msg-body">
                      <div class="msg-content">
                        <span class="msg-name">Bob:</span>
                        <span class="msg">Nullam quis risus eget urna mollis ornare ... </span>
                      </div>
                      <div class="msg-time">
                        <i class="far fa-clock"></i>
                        <span class="time">3:15 pm</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="msg-avatar">
                      <img src="wgx_admin_static/admin/images/avatar2.png" alt="avatar" />
                    </div>
                    <div class="msg-body">
                      <div class="msg-content">
                        <span class="msg-name">Kate:</span>
                        <span class="msg">Ciao sociis natoque eget urna mollis ornare ...</span>
                      </div>
                      <div class="msg-time">
                        <i class="far fa-clock"></i>
                        <span class="time">1:33 pm</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" onclick="return false;">
                    <div class="msg-avatar">
                      <img src="wgx_admin_static/admin/images/avatar5.png" alt="avatar" />
                    </div>
                    <div class="msg-body">
                      <div class="msg-content">
                        <span class="msg-name">Fred:</span>
                        <span class="msg">Vestibulum id penatibus et auctor ...</span>
                      </div>
                      <div class="msg-time">
                        <i class="far fa-clock"></i>
                        <span class="time">10:09 am</span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="dropdown-footer">
            <a href="#" onclick="return false;">
              See all messages
              <i class="icon fa fa-arrow-right"></i>
            </a>
          </li>
        </ul>
      </li>
      <li class="button user">
        <a class="topbar-button-lightblue" href="#" onclick="return false;">
          <img class="avatar" src="wgx_admin_static/admin/images/user.jpg" alt="user avatar">
          <span class="username"><span class="welcome">Welcome,</span> wgx hello world!!!</span>
          <i class="icon fa fa-caret-down"></i>
        </a>
        <ul class="topbar-dropdown-menu" style="display: none;">
          <li>
            <a href="#" onclick="return false;">
              <i class="icon fas fa-cog"></i> Settings
            </a>
          </li>
          <li>
            <a href="#" onclick="return false;">
              <i class="icon fas fa-user"></i> Profile
            </a>
          </li>
          <li class="divider">
          </li>
          <li>
            <a href="#" onclick="return false;">
              <i class="icon fas fa-power-off"></i> Logout
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="main-container" class="main-container">
    <div id="sidebar" class="sidebar show">
      <!-- sidebar-content(position: relative;) 为了布局到 sidebar::before(position: absolute;) 上面 -->
      <div id="sidebar-content" class="sidebar-content">
        <div id="sidebar-shortcuts" class="sidebar-shortcuts">
          <div id="sidebar-shortcuts-large" class="sidebar-shortcuts-large">
            <button class="sidebar-shortcuts-green"><i class="icon fas fa-signal"></i></button>
            <button class="sidebar-shortcuts-blue"><i class="icon fas fa-pencil-alt"></i></button>
            <button class="sidebar-shortcuts-yellow"><i class="icon fas fa-users"></i></button>
            <button class="sidebar-shortcuts-red"><i class="icon fas fa-cogs"></i></button>
          </div>
          <div id="sidebar-shortcuts-mini" class="sidebar-shortcuts-mini">
            <span class="sidebar-shortcuts-green"></span>
            <span class="sidebar-shortcuts-blue"></span>
            <span class="sidebar-shortcuts-yellow"></span>
            <span class="sidebar-shortcuts-red"></span>
          </div>
        </div>
<!--
(1||) (2) (5--) (3) (4|)
设顶层菜单为 level1
1: level1 菜单指示器, 形状为沿着 level1 菜单 left-border 处的 2~3 px 宽的线
2: level2 菜单指示器, 形状为 向右的小三角形
3: active 菜单指示器, 形状为 向左的小三角形
4: level1 菜单展开的 right-border 描边线
5: 菜单 icon && text
class open: 展开 group 菜单, 同时 hightlight 5
class active: 展示 1,2,3,4, 同时 hightlight 5, 同时 突出 2
hover && focus: 展示 1,2, 同时 hightlight 5
refer readme.txt[# 菜单说明]
-->
        <ul class="sidebar-menu-list">
          <li class="menu active menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon fas fa-tachometer-alt"></i>
              <span class="menu-content menu-text">Dashboard</span>
            </a>
          </li>
          <li class="group menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon fas fa-desktop"></i>
              <span class="menu-content menu-text">UI & Elements</span>
              <i class="arrow-down fas fa-angle-down"></i>
            </a>
            <ul class="submenu">
              <li class="group menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Layouts</span>
                  <i class="arrow-down fas fa-angle-down"></i>
                </a>
                <ul class="submenu">
                  <li class="menu menu-level3">
                    <a href="#" onclick="return false;">
                      <span class="menu-content menu-text">Top Menu</span>
                    </a>
                  </li>
                  <li class="menu menu-level3">
                    <a href="#" onclick="return false;">
                      <span class="menu-content menu-text">Two Menus 1</span>
                    </a>
                  </li>
                  <li class="menu menu-level3">
                    <a href="#" onclick="return false;">
                      <span class="menu-content menu-text">Two Menus 2</span>
                    </a>
                  </li>
                  <li class="menu menu-level3">
                    <a href="#" onclick="return false;">
                      <span class="menu-content menu-text">Default Mobile Menu</span>
                    </a>
                  </li>
                  <li class="menu menu-level3">
                    <a href="#" onclick="return false;">
                      <span class="menu-content menu-text">Mobile Menu 2</span>
                    </a>
                  </li>
                  <li class="menu menu-level3">
                    <a href="#" onclick="return false;">
                      <span class="menu-content menu-text">Mobile Menu 3</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Typography</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Elements</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Buttons & Icons</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Content Sliders</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Treeview</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">jQuery UI</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Nestable Lists</span>
                </a>
              </li>
              <li class="group menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Three Level Menu</span>
                  <i class="arrow-down fas fa-angle-down"></i>
                </a>
                <ul class="submenu">
                  <li class="menu menu-level3">
                    <a href="#" onclick="return false;">
                      <i class="menu-content menu-icon fas fa-leaf" style="color: #69AA46;"></i>
                      <span class="menu-content menu-text">Item #1</span>
                    </a>
                  </li>
                  <li class="group menu-level3">
                    <a href="#" onclick="return false;">
                      <i class="menu-content menu-icon fas fa-pencil-alt" style="color: #FF892A;"></i>
                      <span class="menu-content menu-text">4th level</span>
                      <i class="arrow-down fas fa-angle-down"></i>
                    </a>
                    <ul class="submenu">
                      <li class="menu menu-level4">
                        <a href="#" onclick="return false;">
                          <i class="menu-content menu-icon fas fa-plus" style="color: #A069C3;"></i>
                          <span class="menu-content menu-text">Add Product</span>
                        </a>
                      </li>
                      <li class="menu menu-level4">
                        <a href="#" onclick="return false;">
                          <i class="menu-content menu-icon far fa-eye" style="color: #C6699F;"></i>
                          <span class="menu-content menu-text">4th level</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="group menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon fas fa-list-ul"></i>
              <span class="menu-content menu-text">Tables</span>
              <i class="arrow-down fas fa-angle-down"></i>
            </a>
            <ul class="submenu">
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Simple & Dynamic</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">jqGrid plugin</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="group menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon far fa-edit"></i>
              <span class="menu-content menu-text">Forms</span>
              <i class="arrow-down fas fa-angle-down"></i>
            </a>
            <ul class="submenu">
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Form Elements</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Form Elements 2</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Wizard & Validation</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Wysiwyg & Markdown</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Dropzone File Upload</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="menu menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon far fa-list-alt"></i>
              <span class="menu-content menu-text">Widgets</span>
            </a>
          </li>
          <li class="menu menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon far fa-calendar-alt"></i>
              <span class="menu-content menu-text">Calendar</span>
              <i class="alert fas fa-exclamation-triangle" style="color: #DD5A43;"></i>
            </a>
          </li>
          <li class="menu menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon far fa-image"></i>
              <span class="menu-content menu-text">Gallery</span>
            </a>
          </li>
          <li class="group menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon fas fa-tag"></i>
              <span class="menu-content menu-text">More Pages</span>
              <i class="arrow-down fas fa-angle-down"></i>
            </a>
            <ul class="submenu">
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">User Profile</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Inbox</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Pricing Tables</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Invoice</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Timeline</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Search Results</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Email Templates</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Login & Register</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="group menu-level1">
            <a href="#" onclick="return false;">
              <i class="menu-content menu-icon far fa-file"></i>
              <span class="menu-content menu-text">Other Pages</span>
              <i class="arrow-down fas fa-angle-down"></i>
              <span class="wgxadmin-badge menu-badge" style="background-color: #428BCA; opacity: 0.88;">5</span>
            </a>
            <ul class="submenu">
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">FAQ</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Error 404</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Error 500</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Grid</span>
                </a>
              </li>
              <li class="menu menu-level2">
                <a href="#" onclick="return false;">
                  <i class="indicator fas fa-caret-right"></i>
                  <span class="menu-content menu-text">Blank Page</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <div id="sidebar-collapse" class="sidebar-collapse">
          <i class="icon fas fa-angle-double-left"></i>
        </div>
      </div>
    </div>
    <div id="main-content" class="main-content">
      <div id="breadcrumbbar" class="breadcrumbbar">
        <ul class="breadcrumb">
          <li>
            <i class="icon-home fas fa-home"></i>
            <a href="#" onclick="return false;">Home</a>
          </li>
          <li>Dashboard</li>
        </ul>
        <div class="search-box">
          <input name="searchText" class="search-text" type="text" placeholder="Search ..." />
          <i class="icon-search fas fa-search"></i>
        </div>
      </div>
<!--
  page-content setting overflow: hidden; or display: flow-root; create new BFC(block formatting context)
  Setting overflow to a value other than visible is the past way
-->
      <div id="page-content" class="page-content">
      </div>
    </div>
  </div>
  <div id="footer" class="footer">
    <div id="footer-content" class="footer-content">
      <span>
        <span style="color: 478FCA; font-weight: bolder;">WgxAdmin</span>
        <span>Application © 2013-2014</span>
        <span style="margin-left: 8px;">
          <a href="#" onclick="return false;">
            <i class="icon fab fa-twitter-square" style="color: #93CBF9;"></i>
          </a>
          <a href="#" onclick="return false;">
            <i class="icon fab fa-facebook-square" style="color: #337ab7;"></i>
          </a>
          <a href="#" onclick="return false;">
            <i class="icon fas fa-rss-square" style="color: #FF892A;"></i>
          </a>
        </span>
      </span>
    </div>
  </div>
  <div id="settings-container" class="settings-container"></div>
  <div id="btn-scroll-up" class="btn-scroll-up"></div>
  <div id="misc-container" class="misc-container"></div>

  <script>
    function loadState() {
      var mini = window.localStorage.getItem('wgxAdmin-miniSidebar');
      mini = mini ? parseInt(mini) : 0;
      /** @type {HTMLElement} */
      var ele = document.getElementsByTagName('body')[0];
      if (mini) {
        ele.classList.add('sidebar-mini');
      } else {
        ele.classList.remove('sidebar-mini');
      }

      var sidebar = null;
      /** @type {HTMLCollection} */
      var eleList = document.getElementsByClassName('main-container');
      var i = 0, l = null;
      for (i = 0; i < eleList.length; i++) {
        l = eleList[i].getElementsByClassName('sidebar');
        if (l && l.length > 0) {
          sidebar = l[0];
          break;
        }
      }
      var flag = 0;
      if (sidebar) {
        flag = window.localStorage.getItem('wgxAdmin-showSidebar');
        flag = flag ? parseInt(flag) : 0;
        if (flag) {
          sidebar.classList.add('show');
        } else {
          sidebar.classList.remove('show');
        }

        var sidebarCollapse = null;
        eleList = sidebar.getElementsByClassName('sidebar-content');
        for (i = 0; i < eleList.length; i++) {
          l = eleList[i].getElementsByClassName('sidebar-collapse');
          if (l && l.length > 0) {
            sidebarCollapse = l[0];
            break;
          }
        }
        if (sidebarCollapse) {
          var icon = sidebarCollapse.getElementsByClassName('icon');
          if (icon && icon.length > 0) {
            icon = icon[0];
            icon.classList.remove('fa-angle-double-left');
            icon.classList.remove('fa-angle-double-right');
            if (mini) {
              icon.classList.add('fa-angle-double-right');
            } else {
              icon.classList.add('fa-angle-double-left');
            }
          }
        }
      }
    };
    loadState();
  </script>
  <script src="wgx_admin_static/jquery-3.6.1.min.js"></script>
  <script src="wgx_admin_static/admin/wgxadmin.js"></script>
</body>

</html>